<template>
  <div class="offline-order-form">
    <head-title title="订单--创建线下订单"></head-title>
    <el-card>
      <el-row>
        <el-col :span="24">
          <el-form :model="form" :rules="rules" ref="form" label-width="130px">
            <el-form-item label="所属商家：" prop="store_id">
              <el-select v-model="form.store_id" placeholder="请输入或选择店铺" filterable clearable style="width: 300px;">
                <el-option v-for="(data,index) in storeList" :key="index" :label="data.store_name" :value="data.store_id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="收货人：" prop="accept_name">
              <el-input v-model="form.accept_name" placeholder="请输入收货人"></el-input>
            </el-form-item>
            <el-form-item label="收货电话：" prop="mobile_phone">
              <el-input v-model="form.mobile_phone" placeholder="请输入收货电话"></el-input>
            </el-form-item>
            <el-form-item label="收货区域：" prop="province_id">
              <el-cascader
                v-model="region_id"
                :options="regionList"
                :props="{children:'cities',value:'areaId',label:'areaName'}"
                style="width:100%"
                size="medium"
                @change="areaChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址：" prop="address">
              <el-input v-model="form.address" placeholder="请输入详细地址"></el-input>
            </el-form-item>
            <el-form-item label="物流类型：" prop="logistics_type">
              <el-select v-model="form.logistics_type" placeholder="请选择物流类型" filterable clearable style="width: 300px;" @change="clearLogId">
                <el-option label="平台物流" :value="1"></el-option>
                <el-option label="商家物流" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择指定地:" prop="log_id" v-if="form.logistics_type">
              <el-select v-model="form.log_id" placeholder="请选择" style="width: 80%;" filterable v-if="form.logistics_type==2">
                <el-option v-for="item in storeAddressList" :key="item.address_id" :label="item.company_name" :value="item.end_logistics.log_id"></el-option>
              </el-select>
              <el-select v-model="form.log_id" placeholder="请选择" style="width: 80%;" filterable v-if="form.logistics_type==1">
                <el-option v-for="item in platformAddressList" :key="item.address_id" :label="item.company_name" :value="item.end_logistics.log_id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="服务类型：" prop="service_type">
              <el-select v-model="form.service_type" placeholder="请选择服务类型" filterable clearable style="width: 300px;">
                <el-option label="物流点自提" :value="1"></el-option>
                <el-option label="送货到业主家" :value="2"></el-option>
                <el-option label="送货+安装" :value="3"></el-option>
                <!-- <el-option label="其他" :value="4" v-if="store_type==1"></el-option> -->
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="物流费用：" prop="express_type" v-if="store_type==1">
              <el-radio-group v-model="form.express_type">
                <el-radio label="总部承担" :value="1"></el-radio>
                <el-radio label="业主承担" :value="2"></el-radio>
                <el-radio label="其他" :value="3"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="费用说明：" prop="express_brief" v-if="store_type==1">
              <el-input type="textarea" v-model="form.express_brief" :rows="3" placeholder="请输入费用说明"></el-input>
            </el-form-item> -->
            <el-form-item label="订单备注：" prop="remark">
              <el-input type="textarea" v-model="form.remark" :rows="3" placeholder="请输入订单备注"></el-input>
            </el-form-item>
            <el-form-item label="产品信息：">
              <el-button type="primary" size="small" plain @click="changeGoodsDialog = true">选择产品</el-button>
            </el-form-item>
            <el-form-item class="table-theme">
              <el-table :data="goodsList">
                <el-table-column label="商品ID" align="center" prop="goods_id"></el-table-column>
                <el-table-column label="工厂编号" align="center" prop="factory_sn"></el-table-column>
                <el-table-column label="工厂货号" align="center" prop="lining_sn"></el-table-column>
                <el-table-column label="品类" align="center" prop="class_name"></el-table-column>
                <el-table-column label="商品编号" align="center" prop="goods_sn"></el-table-column>
                <el-table-column label="商品sku编号" align="center" prop="sku_sn"></el-table-column>
                <el-table-column label="数量" align="center" prop="num"></el-table-column>
                <el-table-column label="出厂价" align="center" prop="factory_price"></el-table-column>
                <el-table-column label="自营价" align="center" prop="self_price"></el-table-column>
                <el-table-column label="零售价" align="center" prop="retail_price"></el-table-column>
                <el-table-column label="图片" align="center">
                  <template slot-scope="scope">
                    <ImgPopover :src="scope.row.img"></ImgPopover>
                  </template>
                </el-table-column>
                <el-table-column label="颜色" align="center" prop="color"></el-table-column>
                <el-table-column label="尺寸" align="center" prop="size"></el-table-column>
                <el-table-column label="材质" align="center" prop="lining"></el-table-column>
                <el-table-column label="商品备注" align="center" prop="brief"></el-table-column>
                <el-table-column label="是否定制" align="center">
                  <template slot-scope="scope">{{scope.row.is_customized==1?'是':'否'}}</template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="delGoods(scope.$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="submitForm('form')">确认创建订单</el-button>
          </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <!-- 更换产品 -->
		<el-dialog title="选择产品" :close-on-click-modal="false" :visible.sync="changeGoodsDialog" center append-to-body
			width="500px" :close-on-press-escape="false">
			<el-form label-width="170px">
				<div class="change-goods-dialog">
					<ul>
						<li v-for="(data, index) in upimg" :key="index">
							<h1>商品{{ index+1 }}信息：<el-button type="danger" size="mini" plain v-if="upimg.length > 1" @click="delChangeGoods(index)">删除</el-button></h1>
							<div class="input">
								<label>目标sku编号：</label>
								<el-input v-model="data.sku_sn" placeholder="填sku编号" @blur="getOrderFactoryList(data.sku_sn,index)" />
							</div>
							<div class="input">
								<label>数量：</label>
								<el-input v-model="data.num" placeholder="请输入数量" />
							</div>
							<!-- <div class="input">
								<label>选择工厂：</label>
								<el-select placeholder="请选择需要下单的工厂" style="width: 100%"  v-model="data.factory_id" clearable filterable>
									<el-option v-for="(data,index) in data.factoryList" :key="index" :label="data.factory_name" :value="data.factory_id">
									</el-option>
								</el-select>
							</div> -->
							<div class="input" style="margin-top: 0;">
								<label>是否定制：</label>
								<el-switch v-model="data.is_customized" :active-value="1" :inactive-value="0"></el-switch>
							</div>
							<div class="input" style="margin-top: 0;">
								<label>商品备注：</label>
								<el-input type="textarea" :rows="2" v-model="data.brief" placeholder="请输入商品备注" />
							</div>
						</li>
					</ul>
					<el-button type="success" size="mini" plain @click="addChangeGoods" style="margin-top: 12px;">增加商品</el-button>
				</div>
			</el-form>
			<span slot="footer" class="dialog-footer">
        <el-button @click="changeGoodsDialog = false">取消</el-button>
				<el-button type="primary" @click="confirmClick()">确 定</el-button>
			</span>
		</el-dialog>
  </div>
</template>
<script>
import ImgPopover from '@/components/ImgPopover';
export default {
  components: {
    ImgPopover
  },
  data(){
    return {
      userInfo: JSON.parse(localStorage.getItem('userInfo')),
      upimg: [{
        // factoryList: [],
        // factory_id: '',
        sku_sn: '',
        num: '',
        is_customized: '',
        brief: ''
      }],
      form: {
        store_id: '',
        accept_name: '',
        mobile_phone: '',
        province_id: '',
        city_id: '',
        area_id: '',
        address: '',
        service_type: '',
        // express_type: '',
        // express_brief: '',
        remark: '',
        logistics_type: '',
        log_id: '',
      },
      rules: {
        store_id: [{required: true,trigger: 'change',message: '请选择所属商家'}],
        accept_name: [{required: true,trigger: 'blur',message: '请输入收货人'}],
        mobile_phone: [{required: true,trigger: 'blur',message: '请输入电话'}],
        province_id: [{required: true,trigger: 'change',message: '请选择收货区域'}],
        address: [{required: true,trigger: 'blur',message: '请输入收货地址'}],
        service_type: [{required: true,trigger: 'change',message: '请选择服务类型'}],
        logistics_type: [{required: true,trigger: 'change',message: '请选择物流类型'}],
        log_id: [{required: true,trigger: 'change',message: '请选择物流'}],
        // express_type: [{required: true,trigger: 'change',message: '请选择物流费用'}],
        // express_brief: [{required: true,trigger: 'blur',message: '请输入费用说明'}],
        remark: [{required: true,trigger: 'blur',message: '请输入订单备注'}],
      },
      goodsList: [],
      storeList: [],
      region_id: [],
      regionList: require('@/utils/city.json'),
      changeGoodsDialog: false,
      platformAddressList: [],
      storeAddressList: []
    }
  },
  watch: {
    form:{
      handler(n,o){
        console.log(n)
        if(n.store_id){
          this.GetGoodsDelivery()
        }
      },
      immediate: true,
      deep: true
    },
  },
  computed: {
    store_type(){
      let obj = this.storeList.find(item => item.store_id==this.form.store_id)
      return obj?obj.store_type:''
    }
  },
  mounted(){
    this.getStoreSearch()
  },
  methods: {
    clearLogId(){
      this.form.log_id = ''
    },
    // 获取平台物流点
    GetGoodsDelivery(){
      this.$http(this.$ApiList.GetGoodsDelivery,{
        store_id: this.form.store_id,
        accept_name: this.form.accept_name,
        mobile_phone: this.form.mobile_phone,
        province_id: this.form.province_id,
        city_id: this.form.city_id,
        area_id: this.form.area_id,
        address: this.form.address,
      }).then(res => {
        this.platformAddressList = res.datas.platform_delivery
        this.storeAddressList = res.datas.store_delivery
      })
    },
    delGoods(index){
      this.goodsList.splice(index,1)
    },
    getOrderFactoryList(e,index){
			// if(e){
			// 	this.$http(this.$ApiList.orderFactoryList,{sku_sn: e}).then(res => {
			// 		if(!res.datas.length){
			// 			return this.$layer.msg('根据当前sku未找到工厂，请重新输入');
			// 		}
			// 		this.upimg[index].factoryList = res.datas
			// 	})
			// }else{
			// 	this.upimg[index].factoryList = []
      //   this.upimg[index].factory_id = ''
			// }
		},
    delChangeGoods(index){
			this.upimg.splice(index,1)
		},
		addChangeGoods(){
			this.upimg.push({
				// factoryList: [],
				// factory_id: '',
				sku_sn: '',
				num: '',
				is_customized: '',
				brief: ''
			})
		},
    confirmClick(){
      if(!this.upimg.length){
        return this.$layer.msg('请完善产品信息');
      }
      this.$http(this.$ApiList.CreateFactoryGoods,{upimg: JSON.stringify(this.upimg)}).then(res => {
        if(res.code==200){
          this.goodsList = res.datas
          this.changeGoodsDialog = false
        }
      })
    },
    getStoreSearch(){
      this.$http(this.$ApiList.StoreSearch).then(res => {
        if(res.code==200){
          this.storeList = res.datas.data
        }
      })
    },
    areaChange(e){
      this.form.province_id = e[0]
      this.form.city_id = e[1]
      this.form.area_id = e[2]
    },
    submitForm(formName) {
      if(!this.goodsList.length){
        return this.$layer.msg('请选择下单产品');
      }
			this.$refs[formName].validate(valid => {
				if (valid) {
          let arr = []
          this.goodsList.forEach((item,index) => {
            arr.push({
              goods_id: item.goods_id,
              // factory_id: item.factory_id,
              sku_sn: item.sku_sn,
              num: item.num,
              is_customized: item.is_customized,
              brief: item.brief,
            })
          })
          this.form.upimg = JSON.stringify(arr)
					this.$http(this.$ApiList.OfflineAddOrder, this.form).then(res => {
						this.$layer.msg('添加成功');
            this.$router.go(-1)
					});
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
  }
}
</script>
<style lang="scss" scoped>
.change-goods-dialog{
	ul li{
		margin-top: 20px;
    &:first-child{
      margin-top: 0;
    }
		h1{
			font-size: 16px;
			color: #000;
		}
		.input{
			display: flex;
			align-items: flex-start;
			margin-top: 12px;
			label{
				width: 100px;
				line-height: 40px;
			}
			label + *{
				flex: 1;
				min-width: 0;
			}
			.el-switch{
				margin-top: 10px;
			}
		}
	}
}
</style>